<template>
  <el-dialog :model-value="visible" width="40%" append-to-body :show-close="false"  @close="cancel" >
    <div slot="header" class="dialog-title flex justify-between box-align-center">
      <span class="dialog-title-text flex-1">部门管理</span>
      <el-button plain color="#01509f"  @click="goadd(1)" >添加部门</el-button>
    </div>

    <div class="boardBox mt20">
      <el-table
        :data="list"
        :show-header="false"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        v-loading="loading"
        row-key="id"
        style="font-size: 15px;"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        element-loading-text="加载中..."
        class="rounded-table"
      >
        <el-table-column label="姓名" align="left" key="name" prop="name" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="230" >
          <template #default="scope">
            <div class="flex justify-content-space-between" v-if="scope.row.name!='默认部门'">
              <div class="table_an" @click="goedit(2, scope.row)">添加下级部门</div>
              <div class="table_an" @click="goedit(3, scope.row)">编辑</div>
              <div class="table_an" @click="Ondel(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

 
    </div>
         <div class="width100 mt20" style="text-align: right">
        <el-button size="mini" @click="cancel">关闭</el-button>
        <!-- <el-button type="primary" size="mini" color="#01509f">确定</el-button> -->
      </div>
    <!-- <div slot="footer" class="dialog-footer">
        <el-button color="#01509f" type="primary" @click="submitForm">生成邀请链接</el-button>
      </div> -->

    <Adddepartment v-model:addvisible="addvisible" :isedit="isedit" @success="getlist" :parent_info="parent_info" :edit_info="edit_info"></Adddepartment>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, watch, onMounted } from "@/TUIKit/adapter-vue";
  import Adddepartment from "./Adddepartment.vue";
  import { getDepartmentlist, Departmentdel } from "@/api/cf";
  import { ElMessage, ElMessageBox } from "element-plus";
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });
  const addvisible = ref(false);

  const isedit = ref(false);

  const options = ref([
    { value: "option1", label: "选项一" },
    { value: "option2", label: "选项二" },
    { value: "option3", label: "选项三" },
    { value: "option4", label: "选项四" },
  ]);
  const pageInfo = ref({ page: 1, limit: 10 });
  const list = ref([]);
  const parent_info = ref({});
  const edit_info = ref({});
  const loading = ref(false);

  const emit = defineEmits<{ (event: "update:visible", value: boolean): void; (event: "confirm", selectedKeys: ElTreeNodeKey[]): void; (event: "chananniu", value: ""): void }>();
  const queryParams = ref({ keywords: "", selectvalue: "" });
  // 监听 localValue 的变化，通知父组件更新值
  watch(
    () => props.visible,
    newValue => {}
  );

  onMounted(() => {
    getlist();
  });

  function getlist() {
    getDepartmentlist()
      .then(res => {

        list.value = res.data;
      })
      .catch(err => {
        ElMessage({
          message: err,
          grouping: true,
          type: "error",
        });
      });
  }

  function goadd(type) {
    parent_info.value = null;
    edit_info.value = null;
    addvisible.value = true;
    isedit.value = type;
  }

  function goedit(type, row) {

    if (type === 2 || type === 3) {
      edit_info.value = row;
      console.log(edit_info.value,"sgsgsg")
    } else {
      edit_info.value = null;
    }
    addvisible.value = true;
    isedit.value = type;
  }

  function Ondel(row) {
    ElMessageBox.confirm("是否确定删除?", "操作提示", {
      distinguishCancelAndClose: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      confirmButtonClass: "ExitConfirmButton",
    }).then((action: Action) => {
      if (action === "confirm") {
        const data = {
          id: row.id,
        };
        Departmentdel(data).then(res => {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: "success",
          });
         // emit("update:visible", false);
         // emit("success", "");
           getlist();
        });
      }
    });
  }

  function cancel() {
    emit("update:visible", false);
    emit("chananniu", "");
  
  }
  function submitForm() {
    // 在这里处理表单提交逻辑，例如发送请求到服务器
    emit("confirm", selectedKeys);
    emit("chananniu", "");

    //console.log("Form submitted:", queryParams.value);
    // 通知父组件更新 visible 为 false
    emit("update:visible", false);
  }

  function handleSelectionChange(val) {
    console.log(val);
  }
</script>

<style lang="scss" scoped>
.boardBox {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow-y: scroll;
  max-height: calc(60vh - 60px);

  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;

  .dialog-left {
    width: 30%;
    border: solid 1px #eaeaea;
    padding: 10px;
  }

  .dialog-right {
    border: solid 1px #eaeaea;
    padding: 10px;
  }

  .table_an {
    font-size: 15px;
    color: #3c7fc2;
    cursor: pointer;
  }
}

.dialog-title-text {
  font-size: 18px;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.tishi {
  font-size: 14px;
  color: #999;
  background-color: #f3f8fb;
  padding: 5px 10px;
  border-radius: 6px;
}

.ExitConfirmButton {
  background-color: #01509f !important;
  color: #fff !important;
}
</style>
